<template>
  <div class="page page-stadium-detail has-headbar">
    <head-bar :title="$route.meta.title" :prevRoute="prevePage" />
     <van-list
        v-model="moreLoading"
        :finished="moreFinished"
        @load="onLoad">
      <div class="cover" v-if="!subImages.length" :style="{backgroundImage:`url(${cover})`}"></div>
      <van-swipe v-else :autoplay="3000">
        <van-swipe-item :key="index" v-for="(item, index) in subImages">
          <div class="cover" :style="{backgroundImage:`url(${item})`}"></div>
        </van-swipe-item>
      </van-swipe>
      <div class="title">{{venueName}}</div>
      <div class="info">
        <p class="p2"><a class="phone-link" :href="`tel:${contact}`">{{contact}}</a></p>
        <p class="p1"><span class="addressName">{{address}}</span><span class="navigation" @click="navigationEvent">导航</span></p>
        <p class="p3">{{opentime}}</p>
      </div>
      <h3 class="textTitle">预定</h3>
      <van-tabs v-if="sportTypes.length" @click="onTabClick">
        <template v-for="item in sportTypes">
          <van-tab :key="item.sportsTypeId" :title="item.sportsName">
            <ul class="numberList">
              <li class="number-li" v-for="ticket in item.itemList" :key="ticket.id">
                <div class="name">{{ticket.fieldname}}</div>
                 <van-button class="buy-btn" round size="mini" type="warning" @click="orderEvent(ticket.itemid)">预定</van-button>
              </li>
            </ul>
            <div class="ticket-empty" v-if="!item.itemList.length">
              暂无场次
            </div>
          </van-tab>
        </template>
      </van-tabs>
      <div class="ticket-empty" v-if="!sportTypes.length">
        暂无场次
      </div>

      <div class="veneue-info">
         <h3 class="textTitle">场馆简介</h3>
         <div class="venue-text html-content" v-html="venueinfo"></div>
        <div class="ticket-empty" v-if="!venueinfo">
          暂无简介
        </div>
      </div>

      <h3 class="textTitle">用户评价</h3>
      <ul class="discussList" >
        <li v-for="comment in comments" :key="comment.id">
          <div class="people">
            <div class="imgOut" :style="{backgroundImage:`url(${comment.headImg ? comment.headImg : require('@/assets/images/avatar.png')})`}">
            </div>
            <span class="name">{{comment.nikeName}}</span>
            <div class="rightInfo">
              <span class="time">{{comment.createTime | formateDate}}</span>
              <van-rate :value="comment.score" :count="comment.score" :size="12" readonly />
            </div>
          </div>
          <p class="html-content" v-html="comment.comment"></p>
        </li>
      </ul>
      <empty-data text="暂无评价" :empty="comments.length === 0 && !moreLoading"></empty-data>
      </van-list>
  </div>
</template>

<script>
import { Tab, Tabs, Rate, Swipe, SwipeItem } from 'vant'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import { isWechat, getWechatLink } from '@/libs/utils'
import { API_VENUES_DETAIL, API_VENUE_COMMENTS } from '@/service/veneue'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  name: 'stadium-detail',
  mixins: [wxjsdkMixin],
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Rate.name]: Rate,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      cover: '',
      venueName: '',
      subImages: [],
      address: '',
      contact: '',
      venueinfo: '',
      infodesc: '',
      opentime: '',
      lng: '',
      lat: '',
      sportTypes: [], // 运动分类
      pageNumber: 0, // 评价页码
      pageSize: 5,
      moreLoading: false,
      moreFinished: false,
      comments: [],
      prevePage: { name: 'stadium-home' }
    }
  },
  computed: {
    ...mapState({
      userLng: state => state.user.lng,
      userLat: state => state.user.lat
    }),
    venueId () {
      return this.$route.params.id
    }
  },
  filters: {
    formateDate (time) {
      return dayjs(dayjs.unix(time)).format('YYYY-M-D')
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(from)
      if (from.name && (from.name === 'stadium-home' || from.name === 'stadium-list' || from.name === 'stadium-search')) {
        vm.prevePage = { name: from.name, query: from.query, params: from.params }
      }
    })
  },
  mounted () {
    this.wechatShowMenu()
    this.requestDetail().then(() => {
      let shareInfo = {
        title: this.venueName, // 分享标题
        desc: this.infodesc,
        link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.subImages.length > 0 ? this.subImages[0] : this.cover, // 分享图标
        success: function () {
          console.log('分享', getWechatLink(window.location.hash))
        }
      }
      this.wechatShare(shareInfo)
    })
  },
  methods: {
    async requestDetail () {
      await API_VENUES_DETAIL({ venueId: this.venueId }).then(resData => {
        let info = resData.info
        this.cover = info.venueMainPicShowUrl
        this.subImages = info.subImagesShowUrl
        this.lng = info.locationlong
        this.lat = info.locationlat
        this.address = info.venueaddress
        this.contact = info.venuephone
        this.venueName = info.venuename
        this.opentime = info.opentime
        this.sportTypes = info.sportTypes || []
        document.title = info.venuename
        this.venueinfo = info.venueinfo ? info.venueinfo.replace(/\r/g, '<br>').replace(/\n/g, '&nbsp;') : ''
        this.infodesc = info.venueinfo ? info.venueinfo.replace(/\r/g, '').replace(/\n/g, '') : ''
      })
    },
    requestComments () {
      let reqData = {
        sportsVenueId: this.venueId,
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      API_VENUE_COMMENTS(reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          this.comments = [...this.comments, ...resultList]
          if (totalSize === this.comments.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onTabClick (index, title) {
      /*  let itemid = this.venueItems[index].itemid
      if (typeof this.itemTickets[itemid] === 'undefined') {
        this.requestTicket(itemid)
      } */
    },
    orderEvent (id) {
      this.$router.push({ name: 'stadium-ticket', params: { id }, query: { venueId: this.venueId } })
    },
    onLoad () {
      this.requestComments()
    },
    navigationEvent () {
      if (isWechat()) {
        this.openWechatLocation({
          lng: this.lng,
          lat: this.lat,
          name: this.venueName,
          address: this.address
        })
      } else {
        window.location.href = `https://uri.amap.com/navigation?
        from=${this.userLng},${this.userLat},${encodeURIComponent('我的位置')}
        &to=${this.lng},${this.lat},${encodeURIComponent(this.venueName)}
        &mode=car&policy=0&callnative=1`
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-stadium-detail {
  width: 95%;
  margin: 0 auto;
  @import "../../assets/styles/stadium.less";
  .cover {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;
    margin-top: 10px;
  }
  /deep/.van-swipe__indicator{
    background-color: #DEDEDE;
  }
  /deep/.van-swipe__indicator--active{
    background-color: #66CCFF;
  }
  .title {
    font-size: 34/2px;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
  }
  .info {
    overflow: hidden;
    .p1 {
      background: url("../../assets/images/detail/adress@2x.png") 0px 6px no-repeat;
      padding: 5px 0 5px 25px;
      background-size: 14px;
      margin-left: 5px;
      font-size: 14px;
      position: relative;
      .addressName {
        display: inline-block;
        width: 80%;
        line-height: 16px;
        .text-overflow();
        font-weight: bold;
        vertical-align: middle;
      }
      .navigation {
        position: absolute;
        top: 0;
        display: inline-block;
        background: url("../../assets/images/detail/nav@2x.png") 0px 8px
          no-repeat;
        padding: 8px 0 8px 20px;
        background-size: 14px;
        margin-left: 5px;
        font-size: 14px;
      }
    }
    .p2 {
      background: url("../../assets/images/detail/phone@2x.png") 0px 8px
        no-repeat;
      padding: 8px 0 8px 25px;
      background-size: 14px;
      margin-left: 5px;
      font-size: 14px;
    }
    .p3 {
      background: url("../../assets/images/detail/time@2x.png") 0px 8px
        no-repeat;
      padding: 8px 0 8px 25px;
      background-size: 14px;
      margin-left: 5px;
      font-size: 14px;
      font-weight: bold;
    }
    .phone-link {
      color: @fontColorPrimary;
      font-weight: bold;
    }
  }
  .textTitle {
    border-left: 5/2px solid @colorPrimary;
    margin: 20px 0 18px;
    text-indent: 5px;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/.van-tab {
    color: #797979;
  }
  /deep/.van-tab--active {
    color: #373737;
  }
  /deep/.van-tabs__line {
    background-color: @colorPrimary;
  }
  .veneue-info{
    @import "../../assets/styles/htmlcontent.less";
    .venue-text{

    }
  }
  /*运动项目*/
  .numberList {
    .number-li {
      box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
      border-radius: 5px;
      margin: 10px 0;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 16px;
      }
    }
  }
  .ticket-empty{
    text-align: center;
    font-size: 14px;
    padding: 16px 0;
    color: #ccc;
  }
  /*评论*/
  .discussList {
    margin-bottom: 25px;
    li {
      box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
      border-radius: 5px;
      margin: 10px 0;
      padding: 10px;
      .people {
        .imgOut {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 80px;
          vertical-align: middle;
          overflow: hidden;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
        .name {
          font-size: 16px;
        }
        span {
          display: inline-block;
          padding-left: 10px;
        }
        .rightInfo {
          display: block;
          width: 50%;
          text-align: right;
          float: right;
          .time {
            padding-bottom: 5px;
          }
        }
      }
      .html-content {
        padding-top: 10px;
      }
    }
  }
}
</style>
